<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
        }

        button {
            margin: 0;
            background-color: rgba(0, 0, 0, 0);
            border: 0;
            width: 50px;
            height: 50px;
        }

        #openm {
            display: none;
        }

        .clue_form_header {
            background-color: lightgrey;
            height: 50px;
            text-align: center;
            line-height: 50px
        }

        .clue_form_header a {
            display: block;
            margin: 0 auto;
            width: 100px;
            height: 50px;
            text-decoration: none;
            color: white;
            border-radius: 5px;
            background-color: #0096dc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #0096dc">
            <h1 style="color: white;font-size: 22px">
                蚁居
                <span style="float: right">
          用户设置
        </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside id="aside" style="width: 200px;height: 877px;background-color: lightgrey;position: relative">

                <el-menu @select="handleSelect" style="background-color: lightgrey;">

                    <el-menu-item><i class="el-icon-plus"></i>快捷新增</el-menu-item>
                    <el-menu-item index="1">
                        <template slot="title"><i class="el-icon-s-grid"></i>
                            <span>工作台</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <template slot="title"><i class="el-icon-s-opportunity"></i>
                            <span>线索</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <template slot="title"><i class="el-icon-user-solid"></i>
                            <span>客户</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <template slot="title"><i class="el-icon-user"></i>
                            <span>客户公海</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <template slot="title"><i class="el-icon-phone"></i>
                            <span>联系人</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <template slot="title"><i class="el-icon-coin"></i>
                            <span>商机</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <template slot="title"><i class="el-icon-document"></i>
                            <span>合同</span>
                        </template>
                    </el-menu-item>
                </el-menu>
                <div style="position: absolute;bottom: 10px">
                    <button @click="closemenu()" id="closem" style="float:left;"><i class="el-icon-s-fold"></i></button>
                    <br>
                    <button @click="openmenu()" id="openm" style="float: left;"><i class="el-icon-s-unfold"></i>
                    </button>
                </div>
            </el-aside>

            <el-main>
                <!--工作台开始-->
                <el-table v-if="currentIndex=='1'" :data="categoryArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="分类名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--工作台结束-->

                <!--线索开始-->
                <div v-if="currentIndex=='2'">
                    <div class="clue_form_header">
                        <span style="float: left"><i class="el-icon-s-opportunity">线索</i></span>
                        <el-tabs style="margin-left: 20px; float: left" v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane style="width: 100%" label="全部线索" name="first">

                            </el-tab-pane>
                            <el-tab-pane label="我的线索" name="second">

                            </el-tab-pane>
                            <el-tab-pane label="已转客户的线索" name="third">

                            </el-tab-pane>
                        </el-tabs>
                        <span style="float: right"><a href="#"><i class="el-icon-plus">新建线索</i></a></span>
                    </div>
                    <div>
                        <el-table ref="multipleTable" :data="clueArr" tooltip-effect="dark"
                                  style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column label="线索名称" prop="title"></el-table-column>
                            <el-table-column label="线索来源" prop="source"></el-table-column>
                            <el-table-column label="手机" prop="phone_number"></el-table-column>
                            <el-table-column label="地址" prop="address"></el-table-column>
                            <el-table-column label="客户行业" prop="job"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleCategoryDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!--线索结束-->

                <!--客户开始-->
                <el-table v-if="currentIndex=='3'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--客户结束-->

                <!--客户公海开始-->
                <el-table v-if="currentIndex=='4'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="轮播图" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                </el-table>
                <!--客户公海结束-->


                <!--联系人开始-->
                <el-table v-if="currentIndex=='5'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--联系人结束-->

                <!--商机开始-->
                <el-table v-if="currentIndex=='6'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--商机结束-->

                <!--合同开始-->
                <el-table v-if="currentIndex=='7'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--合同结束-->

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1",
                activeName: 'second',
                clueArr: [{
                    title: "三体公司采购暗物质",
                    source: "引力波通讯",
                    phone_number: 15271984958,
                    address: "半人马星座",
                    job: "猎人"
                },
                    {
                        title: "三体公司采购暗物质",
                        source: "引力波通讯",
                        phone_number: 15271984958,
                        address: "半人马星座",
                        job: "猎人"
                    },
                    {
                        title: "三体公司采购暗物质",
                        source: "引力波通讯",
                        phone_number: 15271984958,
                        address: "半人马星座",
                        job: "猎人"
                    },
                    {
                        title: "三体公司采购暗物质",
                        source: "引力波通讯",
                        phone_number: 15271984958,
                        address: "半人马星座",
                        job: "猎人"
                    }],
                multipleSelection: [],
                categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "精品女装"},
                    {id: 3, name: "品牌男装"}, {id: 4, name: "母婴产品"}],
                bannerArr: [{id: 1, url: "imgs/b1.jpg"}, {id: 2, url: "imgs/b2.jpg"},
                    {id: 3, url: "imgs/b3.jpg"}]
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            closemenu() {
                let asideclose = document.getElementById("aside");
                let buttonclosehide = document.getElementById("closem");
                let buttonopenblock = document.getElementById("openm");
                asideclose.style.width = "50px";
                buttonclosehide.style.display = "none";
                buttonopenblock.style.display = "block";
            },
            openmenu() {
                let asideopen = document.getElementById("aside");
                let buttonopenhide = document.getElementById("openm");
                let buttoncloseblock = document.getElementById("closem");
                asideopen.style.width = "200px";
                buttonopenhide.style.display = "none";
                buttoncloseblock.style.display = "block";
            },

            handleSelect(key, keyPath) {
                //key就是导航菜单项的index的值
                v.currentIndex = key;
            },
            handleCategoryDelete(i, c) {
                v.categoryArr.splice(i, 1);
                v.$message.success("成功删除 " + c.name);
            },
            handleBannerDelete(i, b) {
                v.bannerArr.splice(i, 1);
                v.$message.success("成功删除轮播图");
            },
            handleProductDelete(i, p) {
                v.productArr.splice(i, 1);
                v.$message.success("成功删除 " + p.title);
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    })
</script>
</html>